<template>
  <div class="giftPage">
    <!--页面标题-->
    <div class="gift-left-title">
      <h2>{{pageTitle}}</h2>
    </div>
    <div class="gift-title-line"></div>
    <!-- 页面按钮 -->
    <div class="gift-div-button">
      <el-button type="primary" plain  class="gift-button" @click="dialogVisible = true">编辑发布</el-button>
      <el-button type="primary" plain  class="gift-button" @click="reviewReleaseGift">审核发布</el-button>
      <el-button type="primary" plain  class="gift-button" @click="dialogVisible = true">取消发布</el-button>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 98%; margin: 0 1%;" height="500" highlight-current-row  @current-change="handleTableChange">
        <el-table-column style="margin-left: 10px" label="礼品编号" width="160">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{ scope.row.num }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="礼品名称" width="200">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{ scope.row.gift }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="积分" width="120">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{ scope.row.integral }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{ scope.row.stuta }}</span>
            </div>
          </template>
        </el-table-column>


        <!--<el-table-column label="积分加现金" width="220">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{ scope.row.integral2 }}+{{ scope.row.cash }}</span>
            </div>
          </template>
        </el-table-column>-->

        <el-table-column label="介绍摘要">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{ scope.row.remarks }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 数据分页 -->
    <div style="width: 100%;text-align: center; margin: 5px auto">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- 新增 -->
    <el-dialog
      title="新增礼品"
      :visible.sync="dialogVisible"
      width="815px"
      :before-close="handleClose11">
      <template>
        <el-form style="padding: 5px" :inline="true" class="el-demo" ref="gift" :model="giftsForm">
          <!--1-->
          <tr style="width: 760px">
          <el-form-item style="" label="礼品名称">
            <el-input v-model="giftname1" style="width: 400px">{{giftname1}}</el-input>
          </el-form-item>
          </tr>
          <!--2-->
          <tr style="width: 760px">
          <el-form-item label="全积分兑换">积分
            <el-input v-model="giftintegral1" style="width: 350px">{{giftintegral1}}</el-input>
          </el-form-item>
          </tr>
          <!--3-->
         <!-- <tr style="width: 760px">
            <td >
              <el-form-item label="积分+现金">积分
                <el-input v-model="giftsForm.integral2" style="width: 150px">{{giftsForm.integral2}}</el-input>
              </el-form-item>
              <el-form-item label="现金">
                <el-input v-model="giftsForm.cash" style="width: 150px">{{giftsForm.cash}}</el-input>
              </el-form-item>
            </td>
          &lt;!&ndash;  <td>
              <el-form-item label="现金">
                <el-input v-model="giftsForm.cash" style="width: 150px">{{giftsForm.cash}}</el-input>
              </el-form-item>
            </td>&ndash;&gt;
          </tr>-->
<!--4-->
         <!-- <tr style="width: 760px">
          <el-form-item style="" label="兑换点归属党支部/党委">
            <el-select style="width: 300px;" v-model="giftsForm.belong" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </tr>-->
<!--5-->
         <!-- <tr>
          <el-form-item label="兑换地点">
            <el-input v-model="giftsForm.site" style="width: 360px;">{{giftsForm.site}}</el-input>
          </el-form-item>
          </tr>-->
          <!--6-->
         <!-- <tr>
          <el-form-item label="介绍摘要">
            <el-input v-model="giftsForm.remarks" style="width: 360px;">{{giftsForm.remarks}}</el-input>
          </el-form-item>
          </tr>-->
          <!--7-->
          <!--<tr>
          <el-form-item label="上传预览图片">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          </el-form-item>
          </tr>-->
          <!--8-->
          <tr>
            <el-form-item label="介绍详情" style="width: 750px">
              <UEditor :config=ueConfig id="22" ref="ueditor" ></UEditor>
              <!--<el-input type="textarea" :rows="2" v-model="giftsForm2.details" style="width: 360px;">{{giftsForm2.details}}</el-input>-->
            </el-form-item>
          </tr>
        </el-form>

      </template>
      <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible=false">取 消</el-button>
              <el-button type="primary" @click="tijiao()">确定</el-button>
      </span>
    </el-dialog>

    <!-- 修改-->
    <el-dialog
      title="审核礼品"
      :visible.sync="dialogFromVisible"
      width="815px"
      :before-close="handleClose11">
      <template>
        <el-form style="padding: 5px" :inline="true" class="el-demo" ref="giftsForm2" :model="giftsForm2">
          <!--1-->
          <tr style="width: 760px">
            <el-form-item style="" label="礼品名称">
              <el-input v-model="giftsForm2.gift" style="width: 400px">{{giftsForm2.gift}}</el-input>
            </el-form-item>
          </tr>
          <!--2-->
          <tr style="width: 760px">
            <el-form-item label="全积分兑换">积分
              <el-input v-model="giftsForm2.integral" style="width: 350px">{{giftsForm2.integral}}</el-input>
            </el-form-item>
          </tr>
          <!--3-->
          <!--<tr style="width: 760px">
            <td >
              <el-form-item label="积分+现金">积分
                <el-input v-model="giftsForm2.integral2" style="width: 150px">{{giftsForm2.integral2}}</el-input>
              </el-form-item>
              <el-form-item label="现金">
                <el-input v-model="giftsForm2.cash" style="width: 150px">{{giftsForm2.cash}}</el-input>
              </el-form-item>
            </td>
          &lt;!&ndash;  <td style="margin-left: 20px">
              <el-form-item label="现金">
                <el-input v-model="giftsForm2.cash" style="width: 150px">{{giftsForm2.cash}}</el-input>
              </el-form-item>
            </td>&ndash;&gt;
          </tr>-->
          <!--4-->
        <!--  <tr style="width: 760px">
            <el-form-item style="" label="兑换点归属党支部/党委">
              <el-select style="width: 300px;" v-model="giftsForm2.belong" placeholder="请选择">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </tr>-->
          <!--5-->
         <!-- <tr>
            <el-form-item label="兑换地点">
              <el-input v-model="giftsForm2.site" style="width: 360px;">{{giftsForm2.site}}</el-input>
            </el-form-item>
          </tr>
          &lt;!&ndash;6&ndash;&gt;
          <tr>
            <el-form-item label="介绍摘要">
              <el-input v-model="giftsForm2.remarks" style="width: 360px;">{{giftsForm2.remarks}}</el-input>
            </el-form-item>
          </tr>-->
          <!--7-->
         <!-- <tr>
            <el-form-item label="上传预览图片">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :file-list="giftsForm2.fileList"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </tr>-->
          <!--8-->
          <tr >

            <el-form-item label="介绍详情" style="width: 750px">
                <UEditor :config=ueConfig id="122" ref="ueditor"></UEditor>
              <!--<el-input type="textarea" :rows="2" v-model="giftsForm2.details" style="width: 360px;">{{giftsForm2.details}}</el-input>-->
            </el-form-item>
          </tr>
        </el-form>

      </template>
      <span slot="footer" class="dialog-footer">
              <el-button @click="dialogFromVisible=false">取 消</el-button>
              <el-button type="primary" @click="fabu()">确定上架</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import UEditor from  '../../NavUeditor/NavUeditor.vue'
  export default {
    data(){
      return {

        updateshujv:{
          id:'',
          giftflag:'',
        },
        giftname1:'',
        giftintegral1:'',
        loading: false,
//          页面标题
        pageTitle:'礼品管理',
//          当前页
        currentPage1: 1,
//        每页显示几条
        pageSize: 10,
//        总条目数
        total: 0,
//        新增
        dialogVisible: false,
//      修改
        dialogFromVisible: false,

        addgif:{
            giftname:'',
          giftdetails:'',
        /*  giftimg:'',*/
          giftintegral:'',
        },
        fileList:{
            url:'',
        },

//        table表的数据
        tableData: [
          {
            num: '1',
            gift: '打火机',
            integral: '60p',
            stuta: '1',
            remarks: '物美价廉'
          },
          {
            num: '2',
            gift: '剃须刀',
            integral: '60p',
            stuta: '1',
            remarks: '物美价廉'
          },],
//        新增表单的字段
        giftsForm: {
          num: '',//礼品编码
          gift: '',//礼品名称
          integral: '',//全积分兑换数值
          integral2: '',//加现金兑换数值
          cash: '',//现金
          remarks: '',//介绍摘要
          belong: '',//归属
          site:'',// 兑换地点
          details:'',//接受详情
//          预览图片的地址
         /* fileList:[
            {url:'',
            },
                     ] */
        },
//        修改
        giftsForm2: {
          num: 's3',//礼品编码
          gift: 'dd',//礼品名称
          integral: '70',//全积分兑换数值
          integral2: '26',//加现金兑换数值
          cash: '22',//现金
          remarks: '介绍摘要',//介绍摘要
          belong: '归属',//归属
          site:'兑换地点',// 兑换地点
          details:'介绍详情',//接受详情
//          预览图片的地址
          fileList:[{name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
            {name: 'food2.jpeg',
              url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
          ] },
//        新增表 的归属字段
        options3: [{
          value: '镇党委',
          label: '镇党委'
        }, {
          value: '光辉村',
          label: '光辉村'
        }, {
          value: '中兴社区一支部',
          label: '中兴社区一支部'
        }, {
          value: '中兴社区党委',
          label: '中兴社区党委'
        }],
        tableDtaChecked:null,
        ueConfig: {
          //可以在此处定义工具栏的内容
          toolbars: [[
            'fullscreen',  '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
            'directionalityltr', 'directionalityrtl', 'indent', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
            'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'insertframe',  'webapp', 'pagebreak', 'template', 'background', '|',
            'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
            'print', 'preview', 'searchreplace', 'help', 'drafts'
          ]],
          zIndex:3000,
          autoHeightEnabled: false,
          autoFloatEnabled: true,
          initialContent:'请输入内容',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
          autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
          initialFrameWidth: null,
          initialFrameHeight: 300,
          BaseUrl: '',
          UEDITOR_HOME_URL: 'static/ueditor/'
        },
      }

    },
    created(){
    },
    methods: {

      /*确认上架*/
      fabu(){
       console.log("名字是:",this.tableDataChecked.num);
       console.log(this.$BASE_URL+'gift/updateflag')
       this.updateshujv.id=Number(this.tableDataChecked.num);
         this.updateshujv.giftflag=Number(0);
         console.log(this.updateshujv.id);
         console.log(this.updateshujv.giftflag);
        var _this = this;

        this.$http.post(

          this.$BASE_URL+'gift/updateflag',
         (_this.updateshujv),{emulateJSON:true}
       ).then((res)=>{
            console.log(res);

        },)
      },

      /*发起上架请求*/

//        表单内容被选中
      handleTableChange(e){

          this.tableDataChecked = e;
        console.log(e);
      },
//      审核发布
      reviewReleaseGift(){
        if(!this.tableDataChecked){// 没有选中数据
          this.$notify.error({
            title: '操作错误',
            message: '请先选择一条数据,再进行审核发布'
          });
          return;
        }
        this.dialogFromVisible = true
      },
      //删除按钮
      open2(sid) {
        this.$confirm('确定要下架此礼品吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.deletePost(sid),
            this.$message({
              type: 'success',
              message: '下架成功!',
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架'
          });
        });
      },
//      分页
      handleCurrentChange(val) {
        if (this.currentPage != val) {
          this.currentPage = val;
          this.talentsPost(val)
        }
      },
//      关闭弹窗
      handleClose11(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      /*提交*/
      tijiao(){
          /*礼品名称*/
          this.addgif.giftname=this.giftname1;
          /*兑换积分*/
        this.addgif.giftintegral=this.giftintegral1;
        /*  /!*展示图*!/
          this.addgif.giftimg=giftsForm.fileList.url;*/

          /*礼品详情*/

          this.addgif.giftdetails="sad";
          console.log(this.addgif);
      this.addgift(this.addgif);

      },
      addgift:function (addgif) {
        var _this = this;
        console.log(this.$BASE_URL+'gift/addgift');
        this.$http.post(
            this.$BASE_URL+'gift/addgift',
          (addgif),{emulateJSON:true}
        ).then((res)=>{
            console.log(res);
            console.log("返回的东西是这个",res);
          let resCode = res.data.code;
          if(resCode === 200){
              /*刷新页面的*/
//            _this.resetForm("addgif");
            _this.loading = false;
            _this.buttonName = "确定";
            _this.dialogVisible=false;
        /*    _this.userPost(_this.currentPage1);*/
            _this.$message.success(res.data.resMessage);
            console.log("成功");
          }else{
            _this.$message.error(res.data.resMessage);
            console.log("失败");
          }
        },
          function (res) {
          console.log(res.status);
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
    components:{
      UEditor
    }
  }
</script>

<style scoped>
  .giftPage{
    width: 100%;
    background-color: #fff;
  }
  .gift-left-title{
    text-align: left;
    padding: 10px 20px;
  }
  .gift-title-line{
    height:1px;
    width: 98%;
    margin: auto 1%;
    background-color: #ddd;
  }
  .gift-div-button{
    text-align: left;
    width:100%;
    margin: 10px auto;
    background-color: #ffffff;
  }
  .gift-button{
    margin: 0 20px;
  }
</style>
